<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    {% if has_permission %}
    <title>随机色图</title>
    {% else %}
    <title>无权访问</title>
    {% endif %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    {% load static %}
    <!--suppress HtmlUnknownTarget -->
    <link rel="stylesheet" href="{% static 'css/navbar.css' %}">
    <style>
        .error {
            color: red;
            font-size: 20px;
        }

        .content {
            text-align: center;
            margin-top: 50px;
        }

        .input-field {
            margin: 5px;
        }

        .button {
            padding: 4px 10px;
            margin: 5px;
        }

        .image-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>
{% include "includes/navbar.html" %}
<div class="content">
    {% if has_permission %}
    <form id="generate-pic-form" method="post">
        <label for="r18"></label>
        <select id="r18" name="r18" class="input-field">
            <option value="0">非R18</option>
            <option value="1">R18</option>
            <option value="2" selected>混合</option>
        </select>
        <label for="excludeAI"></label>
        <select id="excludeAI" name="excludeAI" class="input-field">
            <option value="false">包含AI</option>
            <option value="true" selected>不包含AI</option>
        </select>
        <label for="uid"></label>
        <input id="uid" name="uid" class="input-field" type="text" placeholder="uid">
        <label for="tag"></label>
        <input id="tag" name="tag" class="input-field" type="text" placeholder="标签">
        <label for="keyword"></label>
        <input id="keyword" name="keyword" class="input-field" type="text" placeholder="关键字">
        <button type="submit" class="button">获取图片</button>
    </form>
    <p id="fail"></p>
    <div id="image-container" class="image-container"></div>
    {% else %}
    <p class="error"> 您无权限访问此页面，请联系小魅的主人</p>
    {% endif %}
</div>
<script>
    $('#generate-pic-form').submit(function (event) {
        event.preventDefault();
        const form = event.target;
        const formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
            if (data['image_url']) {
                $('#image-container').html('<img src="' + data['image_url'] + '" alt="">');
            } else if (data.fail) {
                $('#fail').text(data.fail);
            } else if (data.error) {
                alert(data.error);
            }
        });
    });
</script>
</body>
</html>